<template>
  <h2>案例</h2>
  <h2>class-style语法</h2>
  <!-- active是个类css要声明 isActive变量-->
  <p>class第一种写法：</p>
  <div :class="{ active: isActive, font30: classStatus.isBig }">class第一种写法示例</div>
  <p>class第二种对象写法：</p>
  <div :class="classStatus.classObject">class第二种对象写法示例</div>
  <p>class第三种数组写法：</p>
  <div :class="[classStatus.active, classStatus.font30]">class第三种数组写法示例</div>
  <div :class="[classStatus.isActive2 ? classStatus.active : '', classStatus.font30]">class第三种数组写法示例2</div>
  <p>class第四种数组对象混合写法：</p>
  <div :class="[{ active: classStatus.isActive2 }, classStatus.font30]">
    class第四种数组对象混合写法示例
  </div>
  <el-divider></el-divider>
  <p>
    style第一种写法：font-Size要写成fontSize,不是连写的都改成驼峰模式或者加引号
  </p>
  <!--  <div :style="{ color: activeColor, 'font-size': fontSize }">
        style第一种写法
      </div> -->
  <div :style="{ color: styleStatus.activeColor, fontSize: styleStatus.fontSize }">
    style第一种写法示例
  </div>
  <p>style第二种对象写法</p>
  <div :style="styleStatus.styleObj">style第二种对象写法示例</div>
  <p>style第三种数组写法</p>
  <div :style="[styleStatus.style1, styleStatus.style2]">style第三种数组写法示例</div>
  <div :style="[styleStatus.isActive3 ? styleStatus.style1 : '', styleStatus.style2]">
    style第三种数组写法示例2
  </div>
  <p>注意：Vue3中的新增的v-bind()的常用使用方式，主要包括在css,less,scss中的使用</p>
  <div class="vue3-class">
    style第五种写法示例
  </div>
  <el-button type="primary" @click="changeColor" style="margin-top: 20px;">改变示例style第五种数组对象混合写法示例样式</el-button>
  <el-divider></el-divider>
  <input type="text" :value="text" @input="event => text = event.target.value">
  <input type="text" :value="text" @input="text = $event.target.value" />
  <!-- 下拉框 -->
  <select v-model="subject">
    <!-- :value和value -->
    <!-- 第一种 -->
    <!--       <option :value="1">前端</option>
        <option :value="2">java</option>
        <option :value="3">UI</option> -->
    <!-- 第二种和第一种区别value是绑定的字符串，第一种是数字 -->
    <!--    <option value="1">前端</option>
        <option value="2">java</option>
        <option value="3">UI</option> -->
    <!-- 第三种绑定变量 -->
    <option :value="selectOptions.one">前端</option>
    <option :value="selectOptions.two">java</option>
    <option :value="selectOptions.three">UI</option>
  </select>
  <hr />
  <!-- 复选框 -->
  <!-- 1. 单个复选框  表示布尔类型的值  true 选中 false 不选中 -->
  <input type="checkbox" v-model="isChecked" />
  <hr />
  <!-- 2. 多个复选框跟下拉框绑定值类似也可以绑定变量，自行尝试 -->
  <input type="checkbox" value="book" v-model="hobby" /> 书籍
  <input type="checkbox" value="ball" v-model="hobby" /> 球类
  <input type="checkbox" value="game" v-model="hobby" /> 游戏
  <hr />
  <!-- 单选框 -->
  <input type="radio" value="男" v-model="gender" /> 男
  <input type="radio" value="女" v-model="gender" /> 女
  <!-- 文本域 -->
  <hr />
  <textarea v-model="text"></textarea>
  <el-divider></el-divider>
  <h2>vue获取原生dom</h2>
  <div ref="container">我是一个容器</div>
  <button @click="getText">获取container的html</button>
</template>

<script>
export default {
  name: 'lesson2'
};
</script>

<script setup>
import { ref, reactive, toRefs } from 'vue'
// 绑定值classStatus.isActive,reactive不能直接解构
const classStatus = reactive({
  isActive: true,
  isBig: true,
  classObject: {
    active: true,
    font30: true
  },
  active: 'active',
  font30: 'font30',
  isActive2: false,
})
const styleStatus = reactive({
  activeColor: 'green',
  fontSize: '20px',
  styleObj: { color: 'orange', fontSize: '50px' }, // 或者{ color: 'orange', 'font-size': '50px' }
  style1: { color: 'blue' },
  style2: {
    fontSize: '60px'
  },
  isActive3: false,
})
// toRefs可以将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref
const { isActive } = toRefs(classStatus)
// isActive相当于ref(true)
console.log('isActive: ', isActive.value);
// Vue3新属性：CSS 中的 v-bind()
const vue3Class = ref('#d2568c')
const changeColor = () => {
  vue3Class.value = vue3Class.value == '#d2568c' ? '#333' : '#d2568c'
}
// 表单
const text = ref('')
const selectOptions = ref({
  one: 'one',
  two: 'two',
  three: 'three'
})
const isChecked = ref(false)
const hobby = ref([])
const gender = ref('男')
const container = ref(null);
const getText = () => {
  console.log(container.value.innerText)
}
</script>

<style lang="scss" scoped>
.vue3-class {
  color: v-bind(vue3Class);
  font-size: 20px;
}

.active {
  color: red;
}

.font30 {
  font-size: 30px;
}

[v-cloak] {
  display: none;
}
</style>
